<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE单页SPA路由切换原理</title>
		<style type="text/css">
			router-link{
				text-decoration: underline;
				color: #0000FF;
				cursor: pointer;
				display: block;
			}
		</style>
	</head>
	<body>
		<router-link to='/test1'>测试跳转1</router-link>
		<router-link to='/test2'>测试跳转2</router-link>
		
		<script type="text/javascript">
			//这是路由使用history模式原理
			//使用hash模式本来就不会刷新页面
			
			//获取dom
			var $links = document.querySelectorAll("router-link")
			
			$links.forEach(item=>{
				item.onclick = function(){
					let routeUri = item.getAttribute("to"),	//获取路径
						routeName = item.innerText;
						
					//history.pushState(stateData,nameString,pathUrl)
					//history.replaceState(stateData,nameString,pathUrl)
					//是Html5新增方法，用于在不刷新页面的情况下切换url路径
					
					//跳转（并把页面放入历史）
					history.pushState({userId:"admin"},routeName,routeUri)		//类似于VUE：this.$router.push({path:'/two',params:{userId:"admin"}})
					//可以通过history.state获取传的参数
					console.log(history.state)	//{userId:"admin"}		//类似于VUE：this.$route.params
					
					//调整（不放入历史，直接切换页面）
					//history.replaceState({userId:"admin"},routeName,routeUri)
					//console.log(history.state)
					
					//更换标题
					document.title = routeName
				}
			})
			
		</script>
	</body>
</html>
